<template>
  <div
    class="g-table"
    :style="{
      height: tHeight,
    }"
  >
    <div class="g-table_header">
      <div
        v-if="number"
        class="g-table_header_item"
        :style="{
          width: '50px',
          flex: 'none',
          color: '#06c1ff',
          textAlign: 'center',
        }"
      >
        <img src="@/assets/dot.png" draggable="false" />
        <span>序号</span>
      </div>
      <div
        v-for="(th, k) in columns"
        :key="k"
        class="g-table_header_item"
        :style="{
          width: th.width ? th.width + 'px' : 'auto',
          flex: th.width ? 'none' : 1,
          color: th.color ? th.color : '#06c1ff',
          textAlign: th.align ? th.align : 'center',
        }"
      >
        <img src="@/assets/dot.png" draggable="false" />
        <span>{{ th.label || "" }}</span>
      </div>
    </div>
    <div :id="id + '_table_body'" class="g-table_body">
      <div v-if="data.length != 0" :id="id + '_table_body_box'">
        <div v-for="(tr, k) in data" :key="k" class="g-table_body_item">
          <div
            v-if="number"
            class="g-table_body_item_cell"
            :style="{
              width: '50px',
              flex: 'none',
              color: '#fff',
              textAlign: 'center',
            }"
          >
            {{ k + 1 }}
          </div>
          <div
            v-for="(td, i) in columns"
            :key="i"
            class="g-table_body_item_cell"
            :style="{
              width: td.width ? td.width + 'px' : 'auto',
              flex: td.width ? 'none' : 1,
              color: td.color ? td.color : '#fff',
              textAlign: td.align ? td.align : 'center',
            }"
            :title="tr[td.prop]"
          >
            {{ typeof tr[td.prop] == "number" ? tr[td.prop] : tr[td.prop] || "-" }}
          </div>
        </div>
      </div>
      <div v-else class="g-table_body_empty">暂无数据</div>
    </div>
  </div>
</template>
<script>
export default {
  name: "g-table",
  props: {
    /**
     * 表格唯一id
     */
    id: {
      type: [String, Number],
      default: Date.now(),
    },
    /**
     * 表格滚动速度
     * 默认为0不滚动
     * 单位：ms
     * */
    speed: {
      type: [Number, String],
      default: 0,
    },
    /**
     * 表格列
     * label: 列名
     * width: 列宽
     * color: 列颜色
     * align: 列对齐方式
     * prop: 列字段（需与data中字段一致）
     */
    columns: {
      type: Array,
      default: () => [],
    },
    /** 表格数据 */
    data: {
      type: Array,
      default: () => [],
    },
    /** 表格高度 */
    height: {
      type: [Number, String],
      default: "auto",
    },
    /** 显示序号 */
    number: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      tHeight: "", // 表格高度
      scrollInterval: null, // 定时器
    };
  },
  watch: {
    data: {
      handler() {
        this.clearScrollTimer();
        if (typeof Number(this.speed) === "number" && this.speed > 0) {
          this.$nextTick(() => {
            this.scrollSpeed(
              this.id + "_table_body",
              "g-table_body_item",
              Number(this.speed)
            );
          });
        }
      },
    },
  },
  mounted() {
    this.calculateHeight();
  },
  methods: {
    // 计算表格高度
    calculateHeight() {
      let h = this.height;
      if (typeof h === "string") {
        const result = h.match(/\d+/);
        h = result ? Number(result[0]) + "px" : "auto";
      } else if (typeof h === "number") {
        h = h + "px";
      } else {
        h = "auto";
      }
      this.tHeight = h;
    },
    // 表格定时滚动
    scrollSpeed(id = "", childClass = "", speed = 50) {
      let box = document.getElementById(id);
      let table = document.getElementById(id + "_box");
      let row = table.getElementsByClassName(childClass);
      if (table.clientHeight > box.clientHeight) {
        let currentPosition = 0;
        if (this.scrollInterval) this.clearScrollTimer();
        this.scrollInterval = setInterval(() => {
          currentPosition += 1;
          table.style.transform = `translateY(-${currentPosition}px)`;
          if (currentPosition >= row[0]?.offsetHeight) {
            table.style.transform = "translateY(0)";
            currentPosition = 0;
            table.appendChild(row[0]);
          }
        }, speed);
      } else {
        table.style.transform = `translateY(-${0}px)`;
      }
    },
    // 清除定时器
    clearScrollTimer() {
      if (this.scrollInterval) {
        clearInterval(this.scrollInterval);
        this.scrollInterval = null;
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.g-table {
  width: 100%;
  &_header {
    width: 100%;
    height: 31px;
    display: flex;
    align-items: center;
    background: linear-gradient(
      270deg,
      rgba(7, 46, 134, 0.15) 0%,
      rgba(7, 46, 134, 0.63) 100%
    );
    position: relative;
    &::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 1px;
      background: linear-gradient(90deg, rgba(0, 204, 255, 0.3) 0%, rgba(0, 0, 0, 0) 60%);
    }
    &::after {
      content: "";
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 1px;
      background: linear-gradient(90deg, rgba(0, 204, 255, 0.3) 0%, rgba(0, 0, 0, 0) 60%);
    }
    &_item {
      font-size: 13px;
      padding: 0 10px;
      img {
        width: 10px;
        height: 9px;
        margin-right: 10px;
      }
    }
  }
  &_body {
    width: 100%;
    height: calc(100% - 31px);
    overflow-y: auto;
    &_item {
      width: 100%;
      min-height: 31px;
      display: flex;
      align-items: center;
      &_cell {
        font-size: 13px;
        padding: 0 10px;
      }
    }
    &_empty {
      height: 100%;
      user-select: none;
      color: #fff;
      font-size: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}
/* 整个滚动条 */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
  display: none;
}
/* 滚动条轨道 */
::-webkit-scrollbar-track {
  background: #011554;
  border-radius: 3px;
}
/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
  background: #06c1ff;
  border-radius: 3px;
  &:hover {
    background: #039bce;
  }
}
</style>
